<template>
  <div>
    <h1>watchEffect</h1>
    <h1>需求：当水温达到 60℃,或者水位达到 80cm 时，给服务器发送请求</h1>
    <h2>当前水温{{ temp }}℃</h2>
    <h2>当前水位{{ height }}cm</h2>
    <button @click="updateTemp">点我水温升高 10 度</button>
    <button @click="updateHeight">点我水位上涨 10 厘米</button>
  </div>
</template>

<script setup lang="ts" name="watchEffectTest">
  import { ref, watch, watchEffect } from 'vue';
  // 数据
  let temp = ref(10);
  let height = ref(0);
  // 方法
  function updateTemp() {
    temp.value += 10;
  }
  function updateHeight() {
    height.value += 10;
  }

  // 监视 -- watch 实现
  // watch 做监视 temp 和 height （这里需要监视两个值）
  // watch 需要明确的指出要监视谁
  // watch([temp, height], (value) => {
  //   // 解构赋值
  //   // 从 value 中获取最新的水温和最新的水位
  //   let [newTemp, newHeight] = value;

  //   // 做逻辑处理
  //   if (newTemp >= 60 || newHeight >= 80) {
  //     console.log('给服务器发送请求');
  //   }
  // });

  // 监视 -- watchEffect 实现
  // watchEffect 不用感知需要监视谁
  watchEffect(() => {
    console.log();
    if (temp.value >= 60 || height.value >= 80) {
      console.log('给服务器发送请求');
    }
  });
</script>

<style lang="scss"></style>
